"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { ALL_GENRE_IDS, ArtistGenreId, getGenreName } from "@/types/artist-genre"

interface ArtistFiltersProps {
  onFilterChange: (genreId: ArtistGenreId) => void
}

export function ArtistFilters({ onFilterChange }: ArtistFiltersProps) {
  const [selectedGenreId, setSelectedGenreId] = useState<ArtistGenreId>(ArtistGenreId.ALL)

  const handleGenreClick = (genreId: ArtistGenreId) => {
    setSelectedGenreId(genreId)
    onFilterChange(genreId)
  }

  return (
      <div className="flex flex-wrap gap-4 mb-8">
        {ALL_GENRE_IDS.map((genreId) => (
            <Button
                key={genreId}
                variant="ghost"
                className={cn(
                    "h-8 rounded-full",
                    selectedGenreId === genreId && "bg-primary text-primary-foreground hover:bg-primary/90",
                )}
                onClick={() => handleGenreClick(genreId)}
            >
              {getGenreName(genreId)}
            </Button>
        ))}
      </div>
  )
}

